<template>
  <el-container class="echart-container">
    <el-aside class="echart-aside">
      <el-menu
        :default-active="menuCurrentView"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
        router="true"
      >
        <el-menu-item :index="item.path" v-for="(item, index) in menuList" :key="item.name + index">
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="echart-main">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref, watch } from 'vue'
const menuCurrentView = ref('/echartPage/piechart')
const menuList = ref([
  {
    name: '饼图-定时',
    path: '/echartPage/piechart'
  },
  {
    name: '柱状图',
    path: '/echartPage/barchart'
  },
  {
    name: '进度条',
    path: '/echartPage/progress'
  }
])
</script>
<style lang="scss" scoped>
.echart-container {
  min-height: 93%;
}
.echart-aside {
  width: 200px;
  background-color: rgb(238, 241, 246);
}
.el-menu {
  min-height: 100%;
}
.echart-main {
}
</style>
